<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>SKU设置</span>
                <el-button type="primary" text @click="handleTag()">新增</el-button>
            </div>
        </template>
        <el-tag :type="item.isDeletable ? '' : 'warning'" size="large" v-for="item in skuList" :key="item.id"
            @click="handleTag(item)">{{ item.title }}</el-tag>
        <Dialog ref="dialogRef" @submit="handleSkuInfo" />
    </el-card>
    <el-card class="address">
        <template #header>
            <div class="card-header">
                <span>编辑地址</span>
            </div>
        </template>
        <div class="addressInput">
            <div>收货地址</div>
            <el-input placeholder="请填写收货地址" v-model="address.details" />
            <el-button type="primary" @click="handleAddress">确定</el-button>
        </div>
    </el-card>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"
import Dialog from './components/Dialog.vue';
import { getSkuAddress, putAddress, getSku } from "@/api"
import type { ResSku, ResAddress } from "@/api/interface"
import { ElMessage } from 'element-plus'

const dialogRef = ref()

const handleTag = (item?: ResSku) => {
    dialogRef.value.open(item)
}

const skuList = ref<ResSku[]>([])
const address = reactive<ResAddress>({})
const init = async () => {
    const { data } = await getSkuAddress()
    skuList.value = data.skuList
    // address = data.address
    Object.assign(address, data.address)
}

const handleAddress = async () => {
    try {
        await putAddress(address)
        ElMessage.success("操作成功")
    } catch (error: any) {
        ElMessage.error(error.message)
    }
}

const handleSkuInfo = async () => {
    const { data } = await getSku()
    skuList.value = data

}

init()
</script>


<style scoped lang="scss">
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-tag {
    margin-right: 12px;
    cursor: pointer;
}

.address {
    margin-top: 12px;

    .addressInput {
        display: flex;
        align-items: center;

        .el-input {
            flex: 1;
            margin: 0 12px;
        }
    }
}
</style>